import { useState } from "react";
import { TMotion } from "@/types";
const useMotionFilter = () => {
  const [group, setGroup] = useState<number>(1);
  const [category, setCategory] = useState<number>(0);
  const [keyword, setKeyword] = useState("");

  const handleChangeKeyword = (e) => {
    setKeyword(e.target.value);
  };

  const handleChangeGroup = (value) => {
    setGroup(value);
  };

  const handleChangeCategory = (value) => {
    if (value === 1) {
      setGroup(0);
    } else {
      setGroup(1);
    }
    setCategory(value);
  };

  const filterFun = (item: TMotion) => {
    const isNameMatch = keyword === "" ? true : item.name.includes(keyword);
    const isGroupMatch = group === item.group;
    const isCategoryMatch = category === item.category;

    return isNameMatch && isGroupMatch && isCategoryMatch;
  };

  return {
    group,
    category,
    keyword,
    filterFun,
    handleChangeGroup,
    handleChangeCategory,
    handleChangeKeyword,
  };
};

export default useMotionFilter;
